<template>
  <div class="warning">
    <h3>
      <ul class="tabs">
        <li class="tab" :class="{ active: current === tab.value }" v-for="tab in tabs" :key="tab.value" @click="change(tab.value)">{{ tab.label }}</li>
      </ul>
    </h3>
    <CrossingCongestion v-show="current === 1" />
    <ArterySpeed v-show="current === 2" />
    <HotspotCars v-show="current === 3" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CrossingCongestion from './CrossingCongestion.vue'
import ArterySpeed from './ArterySpeed.vue'
import HotspotCars from './HotspotCars.vue'

const tabs = [
  {
    value: 1,
    label: '路口拥堵',
  },
  {
    value: 2,
    label: '干线车速',
  },
  {
    value: 3,
    label: '热点过车',
  },
]

const current = ref(tabs[0].value)

function change(tab: number) {
  current.value = tab
}
</script>

<style lang="scss" scoped>
.warning {
  height: 340px;
  > h3 {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 38px;
    margin-bottom: 20px;
    background-image: url(../../../assets/bg_title_warning.png);
    background-size: cover;
    .tabs {
      overflow: hidden;
      display: flex;
      font-size: 13px;
      border-radius: 4px;
      background: url(../../../assets/bg_button_group.png) no-repeat;
      background-size: contain;
      .tab {
        list-style: none;
        padding: 3px 9px;
        cursor: pointer;
        color: #0fb2ff;
        &.active {
          color: #fff;
          background: #0f3d5e;
          box-shadow: inset 0px 0px 6px 0px rgba(0, 170, 255, 0.9);
        }
      }
    }
  }
}
</style>
